<template>
  <div>
    <t-form
      ref="form"
      :rules="FORM_RULES"
      :data="formData"
      :colon="true"
      reset-type="initial"
      @reset="onReset"
      @submit="onSubmit"
      scrollToFirstError="smooth"
      label-width="160px"
    >
      <t-form-item
        label="知识库可打断"
        name="interruptible"
        style="width: 500px"
      >
        <t-switch v-model="formData.variablesname" @change="onChange" />
      </t-form-item>

      <t-form-item
        label="通话开始停顿时长"
        name="startPauseDuration"
        style="width: 500px"
      >
        <t-input-number
          v-model="formData.startPauseDuration"
          auto-width
          theme="column"
          :min="0"
          decimalPlaces="1"
        />
        <span> 秒</span>
      </t-form-item>

      <t-form-item
        label="用户不回复等待时长"
        name="noResponseWaitTime"
        style="width: 500px"
      >
        <t-input-number
          v-model="formData.noResponseWaitTime"
          auto-width
          theme="column"
          :min="0"
          decimalPlaces="0"
        />
        <span> 秒</span>
      </t-form-item>

      <t-form-item
        label="延迟挂机时长"
        name="delayedHangupTime"
        style="width: 500px"
      >
        <t-input-number
          v-model="formData.delayedHangupTime"
          auto-width
          theme="column"
          :min="0"
          decimalPlaces="0"
        />
        <span> 秒</span>
      </t-form-item>

      <t-form-item
        label="最大通话时长"
        name="maxCallDuration"
        style="width: 500px"
      >
        <t-input-number
          v-model="formData.maxCallDuration"
          auto-width
          theme="column"
          :min="0"
          decimalPlaces="0"
        />
        <span> 分</span>
      </t-form-item>

      <t-form-item class="buttonbut" style="width: 300px">
        <t-space size="small">
          <t-button theme="primary" type="submit">保存</t-button>
        </t-space>
      </t-form-item>
    </t-form>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";

const formData = ref({
  variablesname: false, // 变量名称
  startPauseDuration: 0.5, // 通话开始停顿时长
  noResponseWaitTime: 5, // 用户不回复等待时长
  delayedHangupTime: 3, // 延迟挂机时长
  maxCallDuration: 5, // 最大通话时长
});

const FORM_RULES = {
  startPauseDuration: [
    { required: true, message: "请输入通话开始停顿时长", trigger: "blur" },
    {
      validator: checkSingleDigitone,
      message: "数值不能小于0",
      trigger: "change",
    },
    {
      validator: checkDecimalOnePlace,
      message: "数值不能大于10",
      trigger: "change",
    },
  ],
  noResponseWaitTime: [
    { required: true, message: "请输入用户不回复等待时长", trigger: "blur" },
    {
      validator: checkSingleDigitone,
      message: "数值不能小于0",
      trigger: "change",
    },
  ],
  delayedHangupTime: [
    { required: true, message: "请输入延迟挂机时长", trigger: "blur" },
    {
      validator: checkSingleDigitone,
      message: "数值不能小于0",
      trigger: "change",
    },
    {
      validator: checkSingleDigittwo,
      message: "数值必须是一位数字",
      trigger: "change",
    },
  ],
  maxCallDuration: [
    { required: true, message: "请输入最大通话时长", trigger: "blur" },
    {
      validator: checkSingleDigitone,
      message: "数值不能小于0",
      trigger: "change",
    },
    {
      validator: checkSingleDigittwo,
      message: "数值必须是一位数字",
      trigger: "change",
    },
  ],
};

function checkSingleDigitone(rule, value, callback) {
  if (rule < 0) {
    return false;
  } else {
    return true;
  }
}
function checkDecimalOnePlace(rule, value, callback) {
  if (!/^\d(\.\d{1})?$/.test(rule) || rule >= 10) {
    return false;
  } else {
    return true;
  }
}

function checkSingleDigittwo(rule, value, callback) {
  if (!Number.isInteger(rule) || rule > 9) {
    return false;
  } else {
    return true;
  }
}
</script>
  
  <style scoped lang="scss">
span {
  margin-left: 10px;
}
:deep(.t-form) {
  margin: 30px 0;
}
</style>
  